<template>
	<div class="list-page">
		<tool-bar nav="" title="多语言">
			<el-button @click="add_click()">添加</el-button>

			<el-button @click="download_template">下载模板</el-button>
			<upload
				v-model="file"
				style="margin:10px;"
				:maxCount="1"
				url="/system/lang-resource/import"
			>
				<el-button>导入</el-button>
			</upload>
			<el-button @click="export_json_click">导出Json</el-button>
			<el-button @click="export_property_dlg=true">导出 property</el-button>
		</tool-bar>
		<my-list
			ref="list"
			url="/system/lang-resource/list"
			@param="preload"
			@loaded="procData"
			:query.sync="query"
			:page-size="10"
			:store="true"
		>

			<!--<template slot-scope="scope"></template>-->
			<el-table-column align="center" label="productLine" prop="productLine.name"></el-table-column>
			<el-table-column align="center" label="key" prop="key">
				<template v-slot="scope">
					<div class="link" @click="edit_click(scope.row)">{{ scope.row.key }}</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="cn" prop="cn"></el-table-column>
			<el-table-column align="center" label="en" prop="en"></el-table-column>
			<el-table-column align="center" label="remark" prop="remark"></el-table-column>
			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button @click="delete_click(scope.row)" size="small">
						删除
					</el-button>
				</template>
			</el-table-column>
			<template #query="scope">
				<kv label="产品线">
					<product-line v-model="scope.query.productLineCode" chk="*"></product-line>
				</kv>
				<kv label="资源key">
					<el-input v-model="scope.query.key"></el-input>
				</kv>
				<kv label="资源值">
					<el-input v-model="scope.query.value"></el-input>
				</kv>
			</template>
		</my-list>

		<el-dialog v-model="export_property_dlg" title="导出property">
			<kv label="语言">
				<selector v-model="query.lang" :data="{en:'英语', cn:'汉语'}"></selector>
			</kv>

			<el-button @click="export_property_click">导出property</el-button>
		</el-dialog>
	</div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2022-05-27 17:28:52
 */
import productLine from "@/component/product-line-ref.vue"





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"file":{},"export_property_dlg":false,"query":{"productLineCode":""}});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const download_template = function() {
    window.location.href = jv.getFullUrl('语言资源.xlsx');
};
const export_property_click = function() {
    if (!$data.query.productLineCode) {
        return jv.error("请选择产品线")
    }
    var query = jv.param($data.query);
    var url = jv.getFullUrl(jv.SERVER_HOST, "system/lang-resource/export/property?authorization=") + encodeURIComponent( jv.authorization ) + "&" + query
    jv.downloadFile(url);
};
const export_json_click = function() {
    if (!$data.query.productLineCode) {
        return jv.error("请选择产品线")
    }
    var query = jv.param($data.query);
    var url = jv.getFullUrl(jv.SERVER_HOST, "system/lang-resource/export/json?authorization=") + encodeURIComponent( jv.authorization ) + "&" + query
    jv.downloadFile(url);
};
const preload = function(param) {
    if (list.value.$refs.query.chk() == false) {
        return;
    }
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function(res) {
    res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
    });
};
const loadData = function(pageNumber) {
    list.value.loadData(pageNumber);
};
const add_click = function() {
    jv.$router.push("/system/lang-resource/add?productLineCode=" + list.value.getQuery().productLineCode)
};
const edit_click = function(row) {
//记录上次点击行
    var rowId = row.id;
    list.value.setLastRow(row);
    jv.$router.push("/system/lang-resource/edit/" + rowId)
};
const delete_click = async function(row) {
    var rowId = row.id, rowName = row.name;
    await jv.confirm('确认删除 ' + rowName + ' 吗？');
    var res = await jv.$http.post("/system/lang-resource/delete/" + rowId)
    loadData();
};





</script>